<!-- 参考官方文档 -->
<template>
    <view class="">
        <view class="" v-for="item in data" :key="item.id">
            <view class="box-title">{{item.title}}</view>
            <view>{{item.body}}</view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';

    let data = ref([] as any);

    // function request() {
    // 	// 发起网络请求，异步
    // 	uni.request({
    // 		// 请求地址
    // 		url: "https://jsonplaceholder.typicode.com/posts",
    // 		// 接口调用成功的回调函数
    // 		success: res => {
    // 			console.log("调用成功", res);
    // 			data.value = res.data;
    // 		}
    // 	});
    // };

    // function request() {
    // 	// 发起网络请求，异步转同步
    // 	uni.request({
    // 		// 请求地址
    // 		url: "https://jsonplaceholder.typicode.com/posts",
    // 	}).then(res => {
    // 		console.log("调用成功", res);
    // 		data.value = res.data;
    // 	});
    // };

    // 发起网络请求，同步，推荐
    async function request() {
        try {
            let res : any = await uni.request({
                //请求地址
                url: "https://jsonplaceholder.typicode.com/posts",
                //请求参数
                data: {
                    id: 1
                },
                //请求类型
                method: "GET",
                //请求头
                header: {
                    "token": "hello"
                },
                //超时时间，单位毫秒
                timeout: 5000
            }).finally(() => {
                console.log("方法结束执行");
            });
            //抛出异常
            // throw res;
            data.value = res.data;
            return res;
        } catch (err) {
            console.log("异常捕捉", err);
        }
    };
</script>

<style lang="scss" scoped>
    .box-title {
        font-size: $custom-font-size-wide;
    }
</style>